<!-- 解析glb -->
<template>
  <!-- <div class="container">
    <div id="container"></div>
  </div> -->
  <div ref="threeJsContainer" class="container" id="container"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { AjaxCommon } from "@/libs/apiCommon";
import { fileAddress } from "@/libs/apiCommon";
export default {
  props: ["curItem"],
  data() {
    return {
      publicPath: fileAddress + "\\",
      finallyPath: "",
      mesh: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      glbModel: null,
      model: null,
      mixer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    async getSource() {
      let finallyPath = "";
      let self = this;
      if (this.curItem && this.curItem.Id) {
        // var url = "RfaResouces\\test123\\test123.gltf";
        // var url = "RfaResouces\\test123\\NewProject.gltf";
        // finallyPath = self.publicPath + url;

        var res = await AjaxCommon(
          `/api/familyresouce/getgltf/${this.curItem.Id}`,
          "post",
          {}
        );
        console.log(res, "res.............");
        if (res.data.status == 200) {
          // 改成将文件下载到public文件夹下
          let strList = res.data.response;
          var url = strList[0];
          // "RfaResouces\\8ac22c8f-2e99-4ed5-8661-b66222fad691\\8ac22c8f-2e99-4ed5-8661-b66222fad691.gltf",
          // "RfaResouces\\8ac22c8f-2e99-4ed5-8661-b66222fad691\\8ac22c8f-2e99-4ed5-8661-b66222fad691.bin"
          finallyPath = self.publicPath + url;
          console.log(res, finallyPath, "res123.....");
        }
      }
      this.finallyPath = finallyPath;
      return finallyPath;
    },
    async initResource() {
      await this.getSource();
      if (this.finallyPath == "") {
        document.getElementById("container").innerHTML = "暂无3D";
        return;
      }
      this.createScene(); // 创建场景
    },
    // 初始化
    init() {
      this.initResource();
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene();
      const width = 660; // 窗口宽度
      const height = 360; // 窗口高度
      // 创建容器
      const container = document.getElementById("container");
      // 创建相机对象 透视相机 3d
      this.camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
      // 场景对象的背景色
      // this.scene.background = new THREE.Color(0x282828)
      // 光源设置 环境光
      const ambient = new THREE.AmbientLight(0xffffff, 2);
      this.scene.add(ambient);
      // 光源设置 平行光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(-10, 10, 10);
      this.scene.add(directionalLight);

      // 网格辅助线 参数1为长度 参数2为分割的段数
      // const gridHelper = new THREE.GridHelper(1, 1)
      // this.scene.add(gridHelper)

      // 辅助坐标系
      // const axesHelper = new THREE.AxesHelper(50)
      // this.scene.add(axesHelper)

      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(width, height);
      this.renderer.setClearColor(0xffffff);
      container.appendChild(this.renderer.domElement);

      const loader = new GLTFLoader();
      const dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath("/draco/gltf/"); //模型解压文件
      loader.setDRACOLoader(dracoLoader);
      loader.load(this.finallyPath, (gltf) => {
        // this.camera.position.set(0, 0.04, 0.15);
        this.camera.position.set(10, 0.1, 0.1); // 设置相机位置
        this.camera.lookAt(0, 0.04, -0.15);
        // this.camera.lookAt(new THREE.Vector3(10, 40, 0)); // 设置相机方向

        this.model = gltf.scene;
        console.log(gltf, "gltf.................");

        var object = gltf.scene;
        object.updateMatrixWorld();
        // 获得包围盒得min和max
        const box = new THREE.Box3().setFromObject(object);
        // 返回包围盒的宽度，高度，和深度
        // const boxSize = box.getSize();
        // 返回包围盒的中心点
        const center = box.getCenter(new THREE.Vector3());
        object.position.x += object.position.x - center.x;
        object.position.y += object.position.y - center.y;
        object.position.z += object.position.z - center.z;

        // this.scene.background = new THREE.TextureLoader().load(this.moxingBg);
        this.scene.add(this.model);
        const animation = gltf.animations[0];
        this.mixer = new THREE.AnimationMixer(this.model);
        this.mixer.clipAction(animation).play();
      });

      // 初始化轨道控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.target.set(0, 0.04, 0);

      // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
      // 控制器是否启用
      // this.controls.enabled = true
      // // 禁用缩放
      // this.controls.enableZoom = true
      // // 是否启用旋转功能
      // this.controls.enableRotate = true
      // // 是否启用平移功能
      this.controls.enablePan = false;
      // // 是否启用屏幕空间平移
      this.controls.screenSpacePanning = false;

      // this.controls.minPolarAngle = 1.5
      // this.controls.maxPolarAngle = 1.5
      // this.controls.minAzimuthAngle = -2.5
      // this.controls.maxAzimuthAngle = 2.5
      // this.controls.minDistance = 0.1
      // this.controls.maxDistance = 0.2

      const _this = this;
      this.controls.addEventListener("change", function () {
        // this.renderer.render(this.scene, this.camera) // 执行渲染操作
        console.log("照相机位置---", _this.camera.position);
        // _this.camera.position.set(0, 0.04, 0.15)
        // _this.camera.lookAt(0, 0.04, -0.15)
      });

      // 渲染场景
      this.animate();
    },
    animate() {
      requestAnimationFrame(this.animate);
      if (this.mixer) {
        // 时间增量，单位是秒
        this.mixer.update(0.01);
      }
      // 这里的注释 是因为不注释的话页面就没东西 因为播放了动画
      // this.controls.update()
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>
<style scoped>
#container,
.container {
  width: 660px;
  height: 360px;
}
</style>

